<template>
  <div class="edit">
    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="网站logo" prop="logo">
          <Upload v-model="form.logo" @clear="clearImageValidate('logo')" />
        </el-form-item>

        <el-form-item label="地址栏图标" prop="icon">
          <Upload v-model="form.icon" @clear="clearImageValidate('icon')" />
        </el-form-item>

        <el-form-item label="网站网址" prop="url">
          <el-input v-model="form.url" placeholder="请输入网站网址" />
        </el-form-item>
        <el-form-item label="首页标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入首页标题" />
        </el-form-item>
        <el-form-item label="首页关键词" prop="keyword">
          <el-input v-model="form.keyword" placeholder="请输入首页关键词" />
        </el-form-item>

        <el-form-item label="首页描述" prop="desc">
          <el-input type="textarea" :row="5" v-model="form.desc" placeholder="请输入首页描述" />
        </el-form-item>

        <el-form-item label="网站统计代码" prop="code">
          <el-input type="textarea" :row="5" v-model="form.code" placeholder="请输入网站统计代码" />
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="form.qq" placeholder="请输入QQ" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="备案号" prop="recordNo">
          <el-input v-model="form.recordNo" placeholder="请输入备案号" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="二维码设置" prop="qrcode">
          <Upload v-model="form.qrcode" @clear="clearImageValidate('qrcode')" />
        </el-form-item>
        <!-- <el-form-item label="关于我们视频" prop="introduce">
          <el-radio-group v-model="uploadType" size="small">
            <el-radio :label="1">本地上传</el-radio>
            <el-radio :label="2">输入视频地址</el-radio>
          </el-radio-group>

          <Upload
            type="video"
            v-if="uploadType === 1"
            v-model="form.introduce"
            @clear="clearImageValidate('introduce')"
          />
          <el-input v-else v-model="form.introduce" placeholder="请输入视频地址" />
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import Upload from "@/components/Upload";
import { getBaseInfo, saveBaseInfo } from "@/api/system/webSiteConfig";

export default {
  name: "Base",
  components: {
    Upload
  },
  data() {
    return {
      // 表单参数
      form: {
        logo: "",
        icon: "",
        url: "",
        title: "",
        keyword: "",
        desc: "",
        code: "",
        phone: "",
        qq: "",
        email: "",
        recordNo: "",
        address: "",
        qrcode: "",
        // introduce: ""
      },
      uploadType: 1,
      // 表单校验
      rules: {
        logo: [{ required: true, message: "请上传网站logo" }],
        icon: [{ required: true, message: "请上传地址栏图标" }],
        url: [
          { required: true, message: "请输入网站网址", trigger: "blur" },
          {
            pattern: /[a-zA-z]+:\/\/[^\s]*/,
            message: "请输入正确网站地址",
            trigger: "blur"
          }
        ],
        title: [{ required: true, message: "请输入首页标题", trigger: "blur" }],
        keyword: [
          { required: true, message: "请输入首页关键词", trigger: "blur" }
        ],
        // phone: [
        //   {
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur"
        //   }
        // ],
        qq: [
          {
            pattern: /[1-9][0-9]{4,}/,
            message: "请输入正确的QQ号码",
            trigger: "blur"
          }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        recordNo: [
          { required: true, message: "请输入备案号", trigger: "blur" }
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getEditInfo();
  },
  methods: {
    clearImageValidate(field) {
      this.rules[field] = [];
      this.$refs["form"].clearValidate(field);
    },
    getEditInfo() {
      getBaseInfo().then(response => {
        this.form = response.data ? response.data : {};
        // this.uploadType = this.form.introduce ? 2 : 1;
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          saveBaseInfo(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess("操作成功");
            }
          });
        }
      });
    },
    // 重置按钮
    cancel() {
      this.getEditInfo();
      this.resetForm("form");
    }
  },
  // watch: {
  //   "form.introduce"(value) {
  //     if (value) {
  //       this.uploadType = 2;
  //     }
  //   }
  // }
};
</script>
<style lang="scss" scoped>
.item {
  font-size: 14px;
  padding: 18px 0;
  span:first-child {
    width: 90px;
    display: inline-block;
    text-align: right;
  }
  span:last-child {
    margin-left: 20px;
    display: inline-block;
  }
  .image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}
.deatil {
  display: flex;
  .avatar {
    width: 140px;
    height: 140px;
    margin-right: 20px;
    .img {
      height: 100%;
    }
    /deep/ img {
      border-radius: 50%;
    }
  }
  .info {
    flex: 1;
  }
}
</style>
